import { useEffect, useState } from 'react';
import { Row, Col, Empty } from 'antd';
import { Chart, Interval, Axis, Legend, registerShape } from 'bizcharts';
import classNames from 'classnames';
import _ from 'lodash';
import styles from './index.less';

const classAssessTotal = {
  data: {
    result: [
      {
        id: 0,
        code: null,
        name: null,
        typeName: '路队',
        indexName: null,
        flag: 1,
        score: 7,
        indexList: null,
      },
      {
        id: 0,
        code: null,
        name: null,
        typeName: '课间操',
        indexName: null,
        flag: 1,
        score: 4,
        indexList: null,
      },
      {
        id: 0,
        code: null,
        name: null,
        typeName: '路队',
        indexName: null,
        flag: -1,
        score: 1,
        indexList: null,
      },
    ],
  },
};

registerShape('interval', 'border-radius', {
  draw(cfg, container) {
    const { points } = cfg;
    let path = [];
    path.push(['M', points[0].x, points[0].y]);
    path.push(['L', points[1].x, points[1].y]);
    path.push(['L', points[2].x, points[2].y]);
    path.push(['L', points[3].x, points[3].y]);
    path.push('Z');
    path = this.parsePath(path); // 将 0 - 1 转化为画布坐标
    if (path[0][2] === path[1][2]) {
      path[1][2] += 1;
    }
    const group = container.addGroup();
    group.addShape('rect', {
      attrs: {
        x: path[1][1], // 矩形起始点为左上角
        y: path[1][2],
        width: path[2][1] - path[1][1],
        height: path[0][2] - path[1][2],
        fill: cfg.color,
      },
    });

    return group;
  },
});

export default () => {
  const [chartData, setChartData] = useState([]);

  useEffect(() => {
    if (classAssessTotal.data) {
      setChartData(
        _.sortBy(
          classAssessTotal.data.result?.map((x) => ({
            ...x,
            flag: x.flag === -1 ? '减分' : '加分',
          })),
          ['typeName', 'flag'],
          ['asc', 'asc'],
        ),
      );
    } else {
      setChartData([]);
    }
  }, []);

  return (
    <div className={classNames(styles.wrapper)}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className="bg bg-2" />
      <Row className={styles['core-wrapper']}>
        <Col span={24}>
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>一周班级积分</span>
          </Row>
        </Col>
        <Col span={24}>
          <Row justify="center">
            {chartData.length ? (
              <Chart height={180} autoFit data={chartData} appendPadding={[30, 0, 0, 0]}>
                <Axis name="typeName" label={{ autoHide: false, autoRotate: true }} />
                <Legend name="flag" position="right" />
                <Interval
                  adjust={[
                    {
                      type: 'stack',
                    },
                  ]}
                  color={[
                    'flag',
                    (xVal) => {
                      if (xVal === '减分') {
                        return 'red';
                      }
                      return '#49D589';
                    },
                  ]}
                  position="typeName*score"
                />
              </Chart>
            ) : (
              <Empty />
            )}
          </Row>
        </Col>
      </Row>
    </div>
  );
};
